<!DOCTYPE html>
<htm>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- reset.css -->
    <!-- <link rel="stylesheet" href="reset.css"> -->
</head>
<body>

	<!-- 视频控件 -->
<video src="http://vfx.mtime.cn/Video/2019/03/09/mp4/190309153658147087.mp4" controls="controls" id="Video">
</video>
	<!-- end -->
	
	<!-- 按钮组 -->
<button style="position: relative; top:-45px; left:-290px;" onclick="VideoFast()">快进</button>
<button style="position: relative; top:-45px; left:-290px;" onclick="VideoSlow()">快退</button>
	<!-- end -->
<script>
 function VideoFast(){
     // 获取视频控件(video)
     var Video = document.getElementById('Video');  
     // 首先让处于暂停的视频播放
     Video.play();
     // 通过改变playbackRate值控制倍速
     sign = Video.playbackRate+=1;
     console.log("当前快放倍速为：" + sign + "倍!");
     	if(sign>=8){//如果>=8倍则
         Video.playbackRate = 1;//重置为正常倍数
         console.log("已到达最高快放倍数，已恢复正常！");
     }
 }
 function VideoSlow(){

     // 获取视频控件(video)
     var Video = document.getElementById('Video');

     // 首先让处于暂停的视频播放
     Video.play();

     // 通过改变playbackRate值控制倍速
     sign = Video.playbackRate-=1;
     console.log("当前慢放倍速为：" + sign + "倍!");
     if(sign<=2){//如果<=2倍则
       Video.playbackRate = 1;//重置为正常倍数
       console.log("已到达最低慢放倍数，已恢复正常！");
    }
}

</script>
</body>
</htm>